<template>
  <div class="userInfo bg">
    <vnav>
      个人资料
      <a class="handel" @click="eidt">编辑</a>
    </vnav>
    <div class="form bgw animated" v-if="!isEdit">
      <div class="formGroup">
        <div class="label">您的称呼</div>
        <p class="ipt">{{user.nickName}} </p>
      </div>
      <div class="formGroup">
        <div class="label">宝宝称呼</div>
        <p class="ipt">{{user.childName}} </p>
      </div>
      <div class="formGroup">
        <div class="label">手机号</div>
        <p class="ipt">{{user.tel}} </p>
      </div>
    </div>
    <div v-if="isEdit" class="animated">
      <div class="form bgw">
        <div class="formGroup">
          <div class="label">您的称呼</div>
          <input type="text" v-model="copyUser.nickName" class="ipt" placeholder="请输入" />
        </div>
        <div class="formGroup">
          <div class="label">宝宝称呼</div>
          <input type="text" v-model="copyUser.childName" class="ipt" placeholder="请输入" />
        </div>
        <div class="formGroup">
          <div class="label">手机号</div>
          <input type="tel" class="ipt" v-model="copyUser.tel" placeholder="请输入" />
          <a class="sendCode" v-if="!isCodeSend" @click="doSendCode">发送验证码</a>
          <a class="sendCode" v-if="isCodeSend">{{codeLast}}s</a>
        </div>
        <div class="formGroup">
          <div class="label">验证码</div>
          <input type="tel" class="ipt" v-model="code" placeholder="请输入" />
        </div>
    </div>
    <a @click="doSaveInfo" class="submit">保存</a>
    </div>
  </div>
</template>
<script type="text/babel">
  import {sendCode, saveInfo} from '../factory/user';
  export default {
    name: 'userinfo',
    components: {
      vnav: require('../components/vnav')
    },
    data () {
      return {
        isEdit: false,
        user: window.user,
        copyUser: Object.assign({}, window.user),
        code: null,
        isCodeSend: false,
        codeLast: 60,
        timer: null
      };
    },
    created () {
      // let that = this;
      this.$dispatch('alert.close');
    },
    methods: {
      eidt () {
        this.isEdit = true;
      },
      doSaveInfo () {
        let that = this;
        saveInfo().then(res => {
          if (!res.iserror) {
            that.$dispatch('alert', '操作成功~');
            that.user = Object.assign({}, that.copyUser);
            this.isEdit = false;
          }
        });
      },
      doSendCode () {
        let that = this;
        sendCode().then(res => {
          if (!res.iserror) {
            that.$dispatch('alert', '操作成功~');
            that.isCodeSend = true;
            that.codeLast = 60;
            that.timer = setInterval(() => {
              that.codeLast--;
              if (that.codeLast === 0) {
                clearInterval(that.timer);
                that.isCodeSend = false;
              }
            }, 1000);
          }
        });
      }
    },
    beforeDestroy () {
      let that = this;
      clearInterval(that.timer);
    }
  };
</script>
